@charset 'utf-8';
 /* 设置默认字体 */
 html,
 body {
     font-size: 14px;
     font-family: sans-serif;
 }
   /* 定义基本的尺寸 */
   :root{
    /* 1 底部导航栏的高度 */
    --tabHeight:7vh;
}

 /* 整体页面容器设置大小、背景 */
 .container_home {
     width: 100%;
     min-height: 100vh;
     background-color: rgb(255, 255, 255);
     padding-bottom: var(--tabHeight);
     display: flex;
     flex-direction: column;
 }

 /* 1 搜索部分 search开始  */
 .search_wrapper {
    min-height: 12vh;
    width: 100%;
    background-color: #0195FF;
    padding-bottom: 15px;
 
}

.search .loc{
    font-size: 1.6em;
    padding-left: 1em;
    margin: 10px 0;
    font-weight: 800;
    color: #FFFFFF;
  
}

.search .search_inp{
    width: 90vw;
    height: 2.5em;
    position: relative;
    margin: 0 auto;
    color: rgb(192, 189, 189);
}
.search .search_inp .bgplaceholder{
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
  
}

.search .search_inp input{
    height: 100%;
    width: 100%;
    height: 2.5em;
    position: absolute;
    background-color: rgba(red, green, blue, 0.5);
    outline: none;
    z-index: 2;
    text-align: center;
    border-radius: 4px;
    border: none;
}

 /* 搜索部分 search结束  */

 /* 2 店铺分类部分 restaurant开始  */
 .restaurant {
    width: 100%;
    min-height: 20vh;
    /* background-color: rgb(243, 214, 220); */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 10px;
    margin: 20px 0;
}

.restaurant .rest {
    /* background-color: aqua; */
    width: calc((100% - 40px) / 5);
    min-height: 8vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.restaurant .rest img {
    width: 60%;
    min-height: 7vh;
}
 /*  店铺分类部分 restaurant结束  */






 /* 3 推荐菜品  开始 cecommending_dishes */
 .cecommending_dishes {
    width: calc(100% - 30px);
    min-height: 20vh; 
    margin: 0 auto;
    background-color:#F9F8F8;
    border-radius: 3px;
}

.cecommending_dishes .introduce{
    margin: 10px 0 30px 30px;
} 

.cecommending_dishes .introduce .subject{
    font-size: 1.8em;
    font-weight: 600;
    margin: 10px 0 5px 0;
    color: black;
}

.cecommending_dishes .introduce .buy{
    margin: 20px 0 ;
}
.cecommending_dishes .introduce .buy a{
   text-decoration: none;
   color: #B3916C;
   font-weight: 600;
}

.cecommending_dishes  .pic{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

 /*  推荐菜品  结束 cecommending_dishes */



 /* 4 开通会员 开始 useVIP */
 .useVIP {
    /* 定义  购买会员部分的高度 */
    --vipHeight:54px;

    width: calc(100% - 20px);
    margin: 0 auto; 
    margin-top: 10px;
    background-color:#FFECC1;
    border-radius: 3px;       
}

.useVIP .left{
    width: 70%;
    min-height: var(--vipHeight) ;
    line-height: var(--vipHeight);
    padding-left: 2.5em;
    background: url('../../asserts/images/VIP皇冠.png') no-repeat ;
    background-position: 0.2em center;
    background-size: 2em 2em;
    font-size: 1.3em;
    font-weight: 700;
    color: #60512A;
}

.useVIP .left>span{
    font-size: 1em;
    /* color: #60512A;  */
    font-weight: normal;
    padding-left: 0.5em;
}

.useVIP .right{
    height: var(--vipHeight);
    line-height: var(--vipHeight);
    margin-right: 10px;
}
.useVIP .right a{
    text-decoration: none;
   color: #B3916C;
   font-weight: 600;
}

 /* 开通会员 结束 useVIP */




 /* 5 推荐商家-title 开始 cecommending_restaurant_caption */
 .cecommending_restaurant_caption {
    width: 100%;
    height: 3em;
    line-height: 3em;
    font-size: 1.6em;
    /* background-color: rgb(221, 224, 233); */
    text-align: center;
}
.cecommending_restaurant_caption span{
    display: inline-block;
    margin: 0 10px;
    font-weight: 500;
    color: black;
}

/* 使用伪类 设置前后元素 */
.cecommending_restaurant_caption span::before, .cecommending_restaurant_caption span::after{
    content: ' — ';
    color: rgb(141, 145, 143);
    font-weight: 500;
}
 /* 推荐商家-title 结束 cecommending_restaurant_caption */



 /* 6 推荐商家 开始 cecommending_restaurant */
 .cecommending_restaurant {
     width: 100%;
     min-height: 20vh;
     background-color: lightgoldenrodyellow;
 }

 /* 推荐商家 结束 cecommending_restaurant */




 /* 底部导航  开始 tabs */
 .tabs {
    position: fixed;
    width: 100%;
    height: var(--tabHeight);
    padding-top: 2px;
    bottom: 0;
    /* background-color: azure; */
    display: flex;
    justify-content: space-between;
    border-top: solid 0.5px rgb(196, 193, 193);
    background-color: rgba(255, 255, 255,1);

}


 /** 设置30% 宽度，当剩余有空间的时候 flex-grow: 1; 允许拉伸 这样可以平均分配*/
.tabs .tab {
    width: 30%;
    height: 100%;
    flex-grow: 1;
    color: #96959A !important;
    font-size: 1.25em;
    text-align: center;
}
.tabs .tab i{
    font-size: 1.5em !important;
}

/* 当前激活的状态  */
.tabs .active .caption , .tabs .active i {
    color: orange !important;
    font-weight: 500 !important;
}

 /* 底部导航  结束 tabs */